<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="活动状态">
						<el-select v-model="state.param.status" placeholder="请选择订单来源" clearable>
							<el-option v-for="item in state.query.orderStatus" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="活动名称">
						<el-form-item label="选择日期">
							<el-date-picker
								v-model="state.param.dateTime"
								type="daterange"
								unlink-panels
								format="YYYY/MM/DD"
								value-format="YYYY-MM-DD"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							/>
						</el-form-item>
					</el-form-item>
					<el-form-item label="信息搜索">
						<el-input v-model="state.param.keyword" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重 置
						</el-button>
						<el-button type="primary" @click="addActivity('add')">
							<el-icon>
								<ele-Plus />
							</el-icon>
							新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="display: flex; flex-direction: column; flex: 1; height: inherit">
					<el-table :data="state.tableData">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column prop="title" label="活动名称" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="活动售价" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="开始时间" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="结束时间" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="创建时间" show-overflow-tooltip></el-table-column>
						<el-table-column prop="createdBy" label="创建人" show-overflow-tooltip></el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button text type="primary" @click="onOpenDetail(scope.row)">查看</el-button>
								<el-button text type="primary" @click="onOpenEdit(scope.row)">编辑</el-button>
								<el-button text type="primary" @click="onRowDel(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination
								@size-change="onHandleSizeChange"
								@current-change="onHandleCurrentChange"
								class="mt15"
								:pager-count="5"
								:page-sizes="[10, 20, 30]"
								v-model:current-page="state.param.pageNum"
								background
								v-model:page-size="state.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="state.total"
							>
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import type { saleOrderListData } from '/@/types/marketing';
import { ppcList, schemeDel } from '/@/api/marketing';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件

const router = useRouter();
// 定义变量内容
const state = reactive({
	param: {
		dateTime: [],
		startTime: '', // 开始时间
		endTime: '', // 结束时间
		keyword: '',
		pageNum: 1,
		pageSize: 10, //这样就可以了， 但是这个不是自动切换得嘛 上面绑定了值
		status: 'null',
	},
	query: {
		orderStatus: [
			{ value: 0, label: '进行中' },
			{ value: 2, label: '已过期' },
			{ value: 3, label: '已删除' },
		],
	},
	loading: false,
	total: 0,
	tableData: [] as Array<saleOrderListData>,
});

onMounted(() => {
	getOrderList();
});

// 获取订单列表
const getOrderList = async () => {
	state.loading = true; //不用传参， 请求得入参在上面都定义了 param这里吗？
	// 对
	const { results } = await ppcList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
};

// 搜索
const search = () => {
	console.log(state.param);
	if (state.param.dateTime.length == 2) {
		state.param.startTime = state.param.dateTime[0];
		state.param.endTime = state.param.dateTime[1];
	}
	state.param.pageNum = 1;
	getOrderList();
};

// 订单详情
const onOpenDetail = (item: any) => {
	console.log(item.id);
	router.push({
		path: '/order/sale/details',
		query: { id: item.id },
	});
};

// 订单详情
const onOpenEdit = (item: any) => {
	console.log(item.id);
	router.push({
		path: '/order/sale/details',
		query: { id: item.id },
	});
};

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 删除活动
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除该活动，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let res = await schemeDel(row.id);
			console.log(res);
			ElMessage.success('删除成功');
		})
		.catch(() => {
			ElMessage.info('已取消');
		});
};
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table {
		flex: 1;
		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
